<template>
  <picker mode="multiSelector" :range="range" :value="value" @change="change" @columnchange="columnchange">
    <slot></slot>
  </picker>
</template>

<script>
import * as utils from './e-picker.js';
let defaultValue;

export default {
  data() {
    return {
      range: [],
      value: []
    };
  },
  props: {
    mode: {
      type: String,
      default: 'date'
    },
    showValue: String,
    startYear: {
      type: [Number, String],
      default: 1949
    },
    endYear: {
      type: [String, Number],
      default: new Date().getFullYear()
    }
  },
  watch: {
    showValue() {
      this.init();
    }
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.range = [];
      this.value = [];
      let l;
      defaultValue = utils.getLocalTime(this.mode);
      if (this.showValue) {
        defaultValue = this.showValue;
      }
      utils.checkShowValue(this.mode, defaultValue);
      this.mode === 'dateTime' ? (l = 6) : (l = 3);
      for (let i = 0; i < l; i++) {
        this.range.push([]);
        this.value.push(0);
        this.setColumns(i);
      }
    },
    setColumns(index) {
      const m = this.mode;
      if (m !== 'time') {
        const showYear = defaultValue.substring(0, 4),
          showMonth = defaultValue.substring(5, 7),
          showDay = defaultValue.substring(8, 10);
        switch (index) {
          case 0:
            const s = +this.startYear,
              e = +this.endYear;
            for (let i = s; i < e + 1; i++) {
              this.range[index].push(i + '年');
            }
            this.value[index] = this.range[index].indexOf(showYear + '年');
            break;
          case 1:
            this.range[index] = utils.getArr(1);
            this.value[index] = this.range[index].indexOf(showMonth + '月');
            break;
          case 2:
            this.range[index] = utils.getDayArr(+showYear, +showMonth);
            this.value[index] = this.range[index].indexOf(showDay + '日');
            break;
          case 3:
            const show_h = defaultValue.substring(11, 13);
            this.range[index] = utils.getArr(3);
            this.value[index] = this.range[index].indexOf(show_h + '时');
            break;
          case 4:
            const show_m = defaultValue.substring(14, 16);
            this.range[index] = utils.getArr(4);
            this.value[index] = this.range[index].indexOf(show_m + '分');
            break;
          case 5:
            const show_s = defaultValue.substring(17, 19);
            this.range[index] = utils.getArr(5);
            this.value[index] = this.range[index].indexOf(show_s + '秒');
            break;
        }
      } else {
        switch (index) {
          case 0:
            const show_h = defaultValue.substring(0, 2);
            this.range[index] = utils.getArr(3);
            this.value[index] = this.range[index].indexOf(show_h + '时');
            break;
          case 1:
            const show_m = defaultValue.substring(3, 5);
            this.range[index] = utils.getArr(4);
            this.value[index] = this.range[index].indexOf(show_m + '分');
            break;
          case 2:
            const show_s = defaultValue.substring(6, 8);
            this.range[index] = utils.getArr(5);
            this.value[index] = this.range[index].indexOf(show_s + '秒');
            break;
        }
      }
      this.$forceUpdate();
    },
    columnchange(e) {
      if (this.mode === 'time') return;
      const column = e.detail.column,
        value = e.detail.value;
      if (column == 1 || !column) {
        this.value[column] = value;
      }
      const y = parseInt(this.range[0][this.value[0]]),
        m = parseInt(this.range[1][this.value[1]]);
      this.range[2] = utils.getDayArr(y, m);
      this.$forceUpdate();
    },
    change(e) {
      const value = e.detail.value;
      const timeArr = value.map((v, i) => {
        return this.range[i][v];
      });
      this.$emit('change', utils.getDateTimeValue(timeArr, this.mode));
    }
  }
};
</script>
